<template>
  <ul class="dictionaries">
    <li class="table-form">
      <header class="dict-type-header">
        <el-form ref="formRef" :model="form" :inline="true">
          <el-form-item>
            <el-input
              v-model="form.dictName"
              class="form-input"
              clearable
              :placeholder="$t('system.dictionary.paramTypeName')"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="checkList">{{
              $t("common.queryText")
            }}</el-button>
            <el-button type="success" @click="handlerAdd">{{
              $t("system.dictionary.newParamType")
            }}</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="sync-d cursor-pointer" @click="syncConfig">
          <img src="@/assets/images/common/catalogue.png" />
          <span class="tip"> 点此进行数据同步 </span>
        </div> -->
      </header>
      <!-- 表格 -->
      <hcTable
        ref="typeTable"
        :table-data="list"
        :options="tableOptions"
        :columns="tableColumn"
        @command="handleAction"
        @row-click="rowClick"
      >
        <template #operates="{ row }">
          <el-popover placement="bottom">
            <div
              class="flex-a-c cursor-pointer param-type"
              @click="handlerEdit(row)"
            >
              <div class="p-edit"></div>
              <span class="tip">{{ $t("common.edit") }}</span>
            </div>
            <div
              class="flex-a-c cursor-pointer param-type"
              @click="handlerDel(row)"
            >
              <div class="p-del"></div>
              <span class="tip">{{ $t("common.delText") }}</span>
            </div>
            <template #reference>
              <div class="flex-a-c">
                <img src="@/assets/images/common/Icon-More.png" />
                <img
                  src="@/assets/images/common/arrow-right.png"
                  v-show="row.isSelect"
                  style="margin-left: 10px"
                />
              </div>
            </template>
          </el-popover>
        </template>
      </hcTable>
    </li>
    <dictTable :options="rowOptions" :pwd="pwd" />
    <dict-type-dialog
      :options="options"
      @onCancel="closeDialog"
      @onSure="onSure"
    />
    <CheckPwd v-model="isCheckDialog" @getPwd="getPwd" />
  </ul>
</template>

<script setup name="dictManage">
import { reactive, ref, toRefs, computed, unref, watch, onMounted } from "vue";
import useTable from "@/hooks/useTable";
import dictTypeDialog from "./components/dict-type-dialog.vue";
import dictTable from "./components/dict-table.vue";
import CheckPwd from "./components/CheckPwd.vue";
import { useI18n } from "vue-i18n";
import { SyncDataSetting } from "@/api/config";

import { ElMessage } from "element-plus";

const { t: $t } = useI18n();

const baseUrl = `/DictionaryType`;
const { list, loading, getList, addFun, updateFun, deleteFun } = useTable(
  baseUrl,
  true,
  false
);
const isCheckDialog = ref(false);
const pwd = ref("");

const getPwd = (val) => {
  pwd.value = val;
};

let num = 1;
watch(
  () => list.value,
  (v) => {
    if (unref(v).length > 0 && num < 2) {
      rowClick(v[0]);
      data.rowOptions = unref(v)[0];
      v[0].isSelect = true;
      num++;
    }
  }
);

onMounted(() => {
  checkList();
});

const formRef = ref();

const tableColumn = [
  {
    prop: "dictName",
    label: $t("system.dictionary.paramTypeName"),
    showOverflowTooltip: true,
  },
  {
    prop: "dictType",
    label: $t("system.dictionary.paramType"),
    showOverflowTooltip: true,
  },
  {
    label: $t("common.operate"),
    align: "center",
    fixed: "right",
    width: "70",
    slot: "operates",
  },
];

const data = reactive({
  // 绑定数据
  form: {
    dictName: "",
  },
  page: {
    pageSize: 999,
    pageIndex: 1,
  },
  options: {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curRole: null,
  },
  rowOptions: {},
});

const tableOptions = computed(() => {
  return {
    loading: loading.value,
    showPagination: false,
    // border: true,
    highlightCurrentRow: true,
    stripe: false,
  };
});

const params = computed(() => {
  let form = JSON.parse(JSON.stringify(data.form));
  Object.keys(form).forEach((key) => {
    if (form[key] === null) {
      form[key] = "";
    }
  });
  return {
    ...form,
    ...data.page,
  };
});
// 操作事件
const handleAction = (command, row) => {
  switch (command) {
    case "edit":
      handlerEdit(row);
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};
// 点击查询
const checkList = () => {
  data.page.pageIndex = 1;
  getList(params.value, baseUrl);
};

// 选中行
const typeTable = ref();
const rowClick = (row) => {
  typeTable.value.element.setCurrentRow(row);
  data.rowOptions = row;
  list.value.forEach((e) => {
    if (e.id === row.id) {
      e.isSelect = true;
    } else {
      e.isSelect = false;
    }
  });
};

// 新增
const handlerAdd = () => {
  data.options = {
    show: true,
    type: "add", // 用于判断是编辑还是删除 add edit
    curRole: null,
  };
};
// 编辑
const handlerEdit = async (item) => {
  data.options = {
    show: true,
    type: "edit", // 用于判断是编辑还是删除 add edit
    curRole: item,
  };
};
// 删除
const handlerDel = async (item) => {
  deleteFun([item.id], `${baseUrl}?password=${pwd.value}`);
};
// 保存弹框
const onSure = (options) => {
  if (options.type === "add") {
    // 新增
    addFun(options.form, `${baseUrl}?password=${pwd.value}`);
  } else {
    updateFun(options.id, options.form, "", `password=${pwd.value}`);
    closeDialog();
  }
  // closeDialog()
};
// 关闭弹框
const closeDialog = () => {
  data.options = {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curRole: null,
  };
};

// 同步配置
const syncConfig = () => {
  SyncDataSetting().then((res) => {
    checkList();
    ElMessage.success("操作成功");
  });
};

const { form, options, rowOptions } = toRefs(data);
</script>
<style lang="scss" scoped>
.dictionaries {
  display: flex;
  height: 100%;
  justify-content: space-between;
  li {
    height: 100%;
    &:nth-of-type(1) {
      width: 35%;
    }
    &:nth-of-type(2) {
      width: 65%;
      border: 1px solid #00feef;
    }
    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24px;
    }
    .dict-type-header {
      // display: flex;
      // justify-content: space-between;
      // height: 50px;
    }
    .upload {
      margin: 0 10px;
      ::v-deep(.el-upload-list) {
        margin: 0;
      }
    }
  }
}
.sync-d {
  display: flex;
  align-items: center;
  height: 30px;
}
.tip {
  color: #00feef;
  font-size: 14px;
  padding-left: 10px;
}
.param-type {
  &:hover {
    background: #b6dcff;
  }

  &:hover span {
    color: #004b90;
  }
}
.cursor-pointer {
  cursor: pointer;
}
</style>
